<template>
  <Modal v-model="combinationPoP" width="45" class-name="vertical-center-modal" :mask-closable="false"
    :closable="false">
    <div slot="header" class="head-sty ff-regular">
      <div class="title ff-bold">
        {{ $t('combination.entrance_text') }}
        <router-link :to="comJump" target="_blank">
          <div class="help-icon">
            {{ $t('combination.pop_title_help') }}
            <Icon type="ios-arrow-forward" />
          </div>
        </router-link>
      </div>
      <Icon type="md-close" class="close-pop" @click="close" />
    </div>

    <div class="content-sty ff-regular">
      <div class="default-pay">
        <div class="info-sty">
          <div class="left">
            <img :src="currentSelectInfo.icon" class="pay-icon" alt="">
            <!-- 余额 -->
            <div class="pay-info" v-if="currentSelectInfo.payCode == 'balance'">
              <div class="top ff-bold">{{ currentSelectInfo.name }}: {{ currentInfo.code }}{{ balanceAmount }}</div>
            </div>
            <!-- 金币 -->
            <div class="pay-info" v-if="currentSelectInfo.payCode == 'goldcoin'">
              <div class="top ff-bold">
                {{ currentSelectInfo.name }}：{{ goldCoinCNYAmount }}
              </div>
              <div class="bottom">≈{{ currentCurrency }}{{ goldCoinAmount }}</div>
            </div>
          </div>
          <div class="right">{{ $t('combination.text-content') }}</div>
        </div>
        <div class="desc-text">{{ $t('combination.sub_tip_text') }}</div>
      </div>
      <div class="sub-title ff-bold">{{ $t('combination.pop_tit_text') }}</div>
      <RadioGroup class="radio-group" v-model="channelIdentification" style="width: 100%;">
        <template>
          <div class="other-channel">
            <div class="pay-item" v-for="item in payList" @click="onSelect(item)" :key="item.id">
              <!-- 禁用遮罩 -->
              <div class="mask-area" v-if="quotaStyle(item)"></div>
              <div class="other-payment">
                <div class="pay-content">
                  <div class="pay-wrap">
                    <Radio :label="item.payCode"
                      :disabled="item.dailyLimitFlag || (item.forbid && item.forbid == 'disable')">
                      <img class="pay-logo" :src="item.icon" alt="" />
                    </Radio>
                  </div>
                  <div class="tooltip" v-if="item.payCode == 'goldcoin'">
                    <div>
                      <div class="ff-bold">{{ item.name }}:{{ goldCoinCNYAmount }}</div>
                      <div class="estimation-sty"> ≈{{ currentCurrency }}{{ goldCoinAmount }}</div>
                    </div>
                    <Tooltip :content="item.description" max-width="400" placement="top">
                      <span class="tooltip-content">
                        <span class="iconfont icon-bangzhu"></span>
                      </span>
                    </Tooltip>
                  </div>
                  <div class="tooltip ff-bold" v-else>
                    {{ item.name }}
                    <Tooltip :content="item.description" max-width="400" placement="top">
                      <span class="tooltip-content">
                        <span class="iconfont icon-bangzhu"></span>
                      </span>
                    </Tooltip>
                  </div>
                  <img class="credit-card" v-if="item.subIcon" :src="item.subIcon" alt="" />
                  <div class="hand-fee ff-bold" v-if="item.payCode != 'goldcoin' && item.payCode != 'balance'">
                    {{ $t("pay.handlingCharge") }}:{{ item.expressCalcVo.channelRate }}%+{{
                      item.expressCalcVo.currencyCode }}
                    {{ item.expressCalcVo.channelFixFee }}</div>
                </div>
                <div class="tips-sty"
                  v-if="(channelIdentification == 'paypal' || channelIdentification == 'paypal_kaimai') && (item.payCode == 'paypal' || item.payCode == 'paypal_kaimai')">
                  <div></div>
                  <div class="content-tips ff-bold">{{ $t('hot.paypal_tips') }}</div>
                </div>
                <div class="join-area" v-if="item.forbid && item.forbid == 'disable'">
                  <div class="border-sty"></div>
                  <div class="discord-btn" @click="openMet()">
                    Join Discord
                    <img src="@/assets/images/user/discord.png" class="icon-sty" alt="">
                  </div>
                  <span class="text" v-html="$t('home.pay_btn_text')"></span>
                </div>
              </div>
              <!-- 是否到达支付限额 -->
              <div class="quota-sty" v-if="item.dailyLimitFlag">{{ $t('pay.quota_tip_text') }}</div>
            </div>
          </div>
        </template>
      </RadioGroup>
    </div>

    <div slot="footer" class="footer-sty ff-regular">
      <div class="handle-sty">
        <span class="desc-text">
          {{ $t('pay.unpaid_total_price') }}：
          <span v-if="currentSelectInfo.payCode == 'balance'" class="coin-currency">
            {{ amountInfo.currency }} {{ comCopeWith }}
          </span>
          <span v-if="currentSelectInfo.payCode == 'goldcoin'" class="coin-currency">
            {{ amountInfo.currency }} {{ comCopeWithBalance }}
          </span>
          <!-- <span class="coin-currency">{{ amountInfo.currency }}</span>
          <span v-if="currentSelectInfo.payCode == 'goldcoin'" class="align-sty">
            <span class="coin-num">{{ goldCoinAmount }}</span>
          </span>
          <span class="add-symbol" v-if="currentSelectInfo.payCode == 'goldcoin'">+</span>
          <span class="amount-num">
            <span v-if="currentSelectInfo.payCode == 'balance'">{{ balanceAmount }} +</span> {{ amountInfo.amount
            }}</span> -->
          <Tooltip placement="top" transfer>
            <Icon type="ios-help-circle-outline" class="help-amount" />
            <div slot="content">
              <!-- 金币 -->
              <div v-if="currentSelectInfo.payCode == 'goldcoin'">
                {{ $t('combination.gold_coin') }}: {{ currentCurrency }}{{ goldCoinAmount }}
              </div>
              <!-- 余额 -->
              <div v-if="currentSelectInfo.payCode == 'balance'">
                {{ $t('user.balance') }}: {{ amountInfo.currency }}{{ balanceAmount }}
              </div>
              <!-- 应付金额 -->
              <!-- <div v-if="currentSelectInfo.payCode != 'goldcoin' && channelIdentification == 'goldcoin'">
                {{ $t('pay.amountPayable') }}: {{ amountInfo.currency }}{{ comCopeWith }}
              </div> -->
              <!-- 应付金额 -->
              <!-- <div v-if="currentSelectInfo.payCode != 'goldcoin' && channelIdentification != 'goldcoin'">
                {{ $t('pay.amountPayable') }}: {{ amountInfo.currency }}{{ comCopeWithBalance }}
              </div> -->
              <div>{{ channelIdentification == 'goldcoin' ? $t('combination.fill_coin_text') :
                $t('combination.tip_amount_text') }}: {{ amountInfo.currency }} {{ amountInfo.amount }}</div>
              <div>{{ $t('pay.handlingCharge') }}: {{ amountInfo.currency }} {{ costFeeInfo.amount || 0 }}</div>
            </div>
          </Tooltip>
        </span>
        <Button class="pay-btn ff-bold" @click="payMet">{{ $t('pay.payment') }}</Button>
      </div>
    </div>
  </Modal>
</template>
<script>
import { orderChannelList } from "@/api/order";
import { debounce } from "@/common/common";
import { bigPlus } from "@/common/digital-computation";
export default {
  props: {
    // 除了被选中的余额or金币之外的所有支付通道
    // payList: {
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // },
    // 当前选择组合支付的信息（金币or余额）
    currentSelectInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    // 选择的货币
    currentInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    // 用户金币数
    goldCoinAmount: {
      type: Number,
      default: 0
    },
    // 用户余额
    balanceAmount: {
      type: Number,
      default: 0
    },
    // 金币折合人民币
    goldCoinCNYAmount: {
      type: Number,
      default: 0
    },
    // 
    currentCurrency: {
      type: String,
      default: ""
    },
    orderNo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      combinationPoP: false,
      channelIdentification: "",
      payList: [],
      amountInfo: {},
      costFeeInfo: {}
    }
  },
  computed: {
    comJump() {
      return process.env.VUE_APP_API == 'https://api.100buy.com' ? `/notice/1867844796468531202` : `/notice/1867780182687059969`;
    },
    comCopeWith() {
      return bigPlus(this.balanceAmount, this.amountInfo.amount);
    },
    comCopeWithBalance() {
      return bigPlus(this.goldCoinAmount, this.amountInfo.amount);
    }
  },
  methods: {
    open() {
      // 获取支付
      orderChannelList({
        currencyCode: this.currentCurrency,
        orderNo: this.orderNo,
        mergePayChannelCode: this.currentSelectInfo.payCode
      }).then((res) => {
        this.payList = res.result.paymentList;
        // 返回除了当前选择的组合支付的所有支付通道
        this.payList = this.payList.filter(item => { return item.payCode != this.currentSelectInfo.payCode });

        //  然后根据 dailyLimitFlag 对过滤后的数组进行排序
        this.payList.sort((a, b) => (a.dailyLimitFlag ? 1 : -1) - (b.dailyLimitFlag ? 1 : -1));

        // 检查用户系统是否是苹果，如果不是不显示飞来汇的苹果支付 toLowerCase不区分大小写
        const userAgent = (navigator.userAgent || window.opera).toLowerCase();
        const isIos = userAgent.includes('iphone') || userAgent.includes('ipad') || userAgent.includes('ipod') || userAgent.includes('macintosh');
        const isSafari = isIos && userAgent.includes('safari') && !userAgent.includes('chrome');
        if (isIos && isSafari) {
          // console.log("苹果用户");
        } else {
          this.payList = this.payList.filter(item => {
            const lowerCasePayCode = item.payCode.toLowerCase();
            return lowerCasePayCode.indexOf('apple') === -1;
          })
        }

        // 默认选中第一个第三方支付通道,且这个三方支付通道没达到限额
        for (let item of this.payList) {
          if (!item.dailyLimitFlag) {
            this.channelIdentification = item.payCode;
            this.amountInfo = item.paymentVo.actAmount;
            this.costFeeInfo = item.paymentVo.costFee;//手续费
            break; // 找到后停止遍历
          }
        }

        // 打开弹框
        this.combinationPoP = true;
      }).catch((err) => {
        console.log(err);
      });
    },
    close() {
      this.combinationPoP = false;
    },
    quotaStyle(item) {
      return item.dailyLimitFlag || (item.forbid && item.forbid == 'disable');
    },
    onSelect(info) {
      if (!info.dailyLimitFlag && (!info.forbid && info.forbid != 'disable')) {
        this.amountInfo = info.paymentVo.actAmount;
        this.costFeeInfo = info.paymentVo.costFee;//手续费
        this.channelIdentification = info.payCode;
      }
    },
    payMet: debounce(function () {
      const payData = {
        channelCodeMaster: this.currentSelectInfo.payCode,
        channelCodeSlave: this.channelIdentification,
        payAmount: this.amountInfo.amount,
        currencyCode: this.currentCurrency,

      }
      this.$emit('currentChannelIdentification', payData);//当前选中
      this.close();
    }),
    openMet() {
      // window.open('https://discord.com/channels/1260131355573092412/1283010067649789993', '_blank');
      window.open('https://discord.com/invite/H5fEeBCY3y', '_blank');
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 33px 23px 34px 31px;
}

:deep(.ivu-modal-body) {
  padding: 0 33px 0 31px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 0 50px 31px 50px;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
      display: inline-flex;
      align-items: center;

      .help-icon {
        color: #FF186B;
        font-size: 14px;
        background-color: #FFEEF4;
        padding-left: 8px;
        padding-right: 4px;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 10px;
      }
    }

    .close-pop {
      color: #1E1714;
      font-weight: 500;
      font-size: 32px;
      cursor: pointer;
    }
  }

  .content-sty {

    .default-pay {
      padding-bottom: 22px;
      border-bottom: 1px solid #E9EAF3;

      .info-sty {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 30px;
        margin-right: 15px;

        .left {
          display: flex;
          align-items: center;
          gap: 16px;

          .pay-icon {
            width: 48px;
          }

          .pay-info {

            .top {
              font-weight: 600;
              font-size: 18px;
              color: #1E1714;
              line-height: 21px;
            }

            .bottom {
              font-weight: 400;
              font-size: 18px;
              color: #767B93;
              line-height: 21px;
              margin-top: 4px;
            }
          }
        }

        .right {
          font-weight: 400;
          font-size: 16px;
          color: #767B93;
          line-height: 19px;
        }
      }

      .desc-text {
        font-size: 16px;
        color: #666666;
        text-align: justify;
        margin-top: 14px;
        margin-left: 30px;
      }
    }


    .sub-title {
      font-weight: bold;
      font-size: 18px;
      color: #1E1714;
      line-height: 21px;
      margin-top: 24px;
    }

    .other-channel {
      min-height: 300px;
      height: 300px;
      overflow-y: scroll;
      scrollbar-width: none;
      /* 对于Firefox浏览器隐藏滚动条 */
      -ms-overflow-style: none;
      /* 针对IE和Edge浏览器隐藏滚动条 */

      .pay-item {
        padding-top: 24px;
        position: relative;

        .mask-area {
          background: #FFFFFF;
          opacity: 0.6;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 2;
          cursor: not-allowed;
        }

        .tag {
          padding: 6px 24px;
          background: #f0f9ff;
          border-radius: 4px 4px 0px 0px;
          color: @primary-color;
          font-size: 14px;
        }

        .other-payment {
          padding-bottom: 24px;

          .pay-content {
            // width: 650px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .pay-wrap {
              display: flex;
              align-items: center;

              :deep(.ivu-radio-wrapper) {
                display: flex;
                align-items: center;
                gap: 15px;
                margin-right: 16px;
              }

              .pay-logo {
                display: block;
                width: 48px;
              }
            }

            .credit-card {
              display: block;
              margin-left: 17px;
              height: 30px;
            }

            .hand-fee {
              font-weight: 600;
              font-size: 18px;
              color: #FF186B;
              line-height: 23px;
              margin-left: 30px;
            }

            .tooltip {
              display: flex;
              gap: 6px;
              cursor: pointer;
              font-weight: 600;
              font-size: 18px;
              color: #1E1714;
              line-height: 23px;

              .estimation-sty {
                font-weight: 400;
                font-size: 14px;
                color: #767B93;
                line-height: 16px;
                margin-top: 6px;
              }

              .tooltip-content {
                display: flex;
                align-items: center;
                color: @t-title-color;
                font-size: 14px;
                font-weight: 500;

                .iconfont {
                  margin-left: 4px;
                  color: #767B93;
                  font-size: 24px;
                }
              }
            }

          }

          .tips-sty {
            display: flex;
            justify-content: space-between;

            .content-tips {
              padding: 19px 33px;
              background: #F7F9FC;
              border-radius: 8px 8px 8px 8px;
              font-weight: 600;
              font-size: 16px;
              color: #767B93;
              line-height: 19px;
              margin-top: 32px;
              text-align: justify;
            }
          }

          .join-area {
            min-width: 407px;
            padding: 10px 20px;
            background: linear-gradient(78deg, rgba(242, 20, 115, 0.14) 8%, rgba(53, 151, 255, 0.1) 38%, rgba(215, 133, 56, 0.1) 81%, rgba(17, 31, 226, 0.21) 100%);
            border-radius: 8px 8px 8px 8px;
            display: inline-flex;
            align-items: center;
            margin-left: 38px;
            margin-top: 12px;
            position: relative;
            z-index: 3;

            .discord-btn {
              min-width: 150px;
              height: 34px;
              padding: 0 12px;
              background: #1E1714;
              border-radius: 22px 22px 22px 22px;
              font-weight: 600;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 19px;
              display: inline-flex;
              align-items: center;
              cursor: pointer;

              .icon-sty {
                width: 22px;
                height: 22px;
                margin-left: 4px;
              }
            }

            .text {
              font-weight: 400;
              font-size: 16px;
              color: #1E1714;
              line-height: 19px;
              margin-left: 8px;

              :deep(span) {
                font-weight: 600;
                color: #FF186B;
                font-style: italic;
              }
            }
          }
        }

        .quota-sty {
          padding: 12px 24px;
          background: #FFEEF4;
          border-radius: 8px;
          font-size: 16px;
          line-height: 18px;
          font-weight: 500;
          color: #FF186B;
        }
      }
    }

    .other-channel::-webkit-scrollbar {
      display: none;
      /* 针对Chrome、Safari、Opera等基于WebKit内核的浏览器隐藏滚动条 */
    }
  }

  .footer-sty {
    padding-top: 33px;
    border-top: 1px solid #E9EAF3;

    .handle-sty {
      display: inline-flex;
      align-items: center;
      gap: 20px;

      .desc-text {
        font-weight: 400;
        font-size: 18px;
        color: #767B93;
        line-height: 21px;
        display: inline-flex;
        align-items: center;

        .coin-currency {
          font-weight: bold;
          font-size: 24px;
          color: #FF186B;
          line-height: 28px;
          margin-right: 6px;
        }

        .align-sty {
          display: inline-flex;
          align-items: center;
        }

        // .coin-icon {
        //   width: 24px;
        //   height: 24px;
        //   margin-left: 16px;
        //   margin-right: 8px;
        // }

        .coin-num {
          font-weight: bold;
          font-size: 24px;
          color: #FF186B;
          line-height: 28px;
        }

        .add-symbol {
          color: #FF186B;
          line-height: 19px;
          font-weight: 600;
          margin: 0 8px;
        }

        .amount-num {
          font-weight: bold;
          font-size: 24px;
          color: #FF186B;
          line-height: 28px;
        }

        .help-amount {
          color: #AEB0B9;
          font-size: 30px;
          margin-left: 9px;
          cursor: pointer;
        }
      }

      .pay-btn {
        min-width: 118px;
        height: 44px;
        background: #FF186B;
        border-radius: 8px 8px 8px 8px;
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 19px;
      }
    }
  }

  .ivu-modal {
    top: 0;
  }
}
</style>